E.grid = {};

Ext.define('TTT', {
    extend : 'Ext.data.Model',
    fields : [ {
        name : 'date',
        type : 'date'
    }, {
        name : 'price',
        type : 'float'
    }, {
        name : 'description',
        type : 'string'
    }, {
        name : 'id',
        type : 'string'
    } ]
});

E.grid.load = function() {
    var myData = Ext.create('Ext.data.JsonStore', {
        model : 'TTT',
        proxy : {
            type : 'ajax',
            url : wsapp.basePath + 'queryCost.do',
            reader : {
                type : 'json',
                root : 'data',
                totalProperty : 'pageTotal'
            }
        },
        remoteSort : false,
        sorters : [ {
            property : 'date',
            direction : 'ASC'
        } ],
        pageSize : 15
    });

    myData.loadPage(1);

    var store = Ext.create('Ext.data.ArrayStore', {
        fields : [ {
            name : 'date',
            type : 'date',
            dateFormat : 'Y-m-d'
        }, {
            name : 'price',
            type : 'float'
        }, {
            name : 'description'
        } ],
        data : myData
    });

    var grid = Ext.create('Ext.grid.Panel', {
        store : myData,
        columnLines : true,
        columns : [ {
            text : 'Date',
            renderer : new Ext.util.Format.dateRenderer("Y-m-d"),
            dataIndex : 'date',
            flex : 1.5,
        }, {
            text : 'Price',
            dataIndex : 'price',
            flex : 1,
        }, {
            text : 'description',
            flex : 7.5,
            dataIndex : 'description',
        } ],
        title : 'center',
        renderTo : 'center-div',
        dockedItems : [ {
            xtype : 'pagingtoolbar',
            id : 'cpagingtoolbar',
            store : myData, // same store GridPanel is using
            dock : 'bottom',
            displayInfo : true
        } ],
        listeners : {
            itemclick : E.event.gridClick
        }
    });

    return grid;
};

E.grid.form = function(data) {
    var simple = Ext.create('Ext.form.Panel', {
        url : wsapp.basePath + 'editCost.do',
        frame : true,
        bodyStyle : 'padding:5px 5px 0',
        width : 350,
        fieldDefaults : {
            msgTarget : 'side',
            labelWidth : 75
        },
        defaultType : 'textfield',
        defaults : {
            anchor : '100%'
        },

        items : [ {
            xtype : 'datefield',
            fieldLabel : 'Date',
            name : 'date',
            allowBlank : false,
            readOnly : true,
            value : data.date
        }, {
            fieldLabel : 'Price',
            name : 'price',
            regex : /^(\d*\.)?\d+$/,
            regexText : 'only float',
            allowBlank : false,
            value : data.price
        }, {
            fieldLabel : 'Description',
            name : 'description',
            value : data.description
        }, {
            xtype : 'hiddenfield',
            name : 'id',
            value : data.id
        } ],

        buttons : [ {
            text : 'Save',
            handler : function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {

                    form.submit({
                        success : function(form, action) {
                            Ext.Msg.alert('Success', action.result.msg);
                            E.event.treeWin.close();
                            Ext.getCmp('cpagingtoolbar').doRefresh();
                        },
                        failure : function(form, action) {
                            Ext.Msg.alert('Failed', action.result.msg);
                        }
                    });
                }
            }
        }, {
            text : 'Cancel',
            handler : function() {
                E.event.treeWin.close();
            }
        } ]
    });

    return simple;
};